﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>秘镜</title>
<link rel="stylesheet" href="../../js/style.css">
<link rel="stylesheet" href="touch.css" media="screen and (max-width:1000px)">
<script type="text/javascript" src="../../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../../js/Common.js"></script>

</head>

<body>
<div id="content">  
  <div class="img_ul"></div>
</div>
<!-- <a href="index.html" class="In_back">返回首页</a> -->
<div class="pa_num">
  <span class="num"></span> / <span class="sum"></span>  
  <div class="pa_ul"></div>
</div>
<script src="../../config.js"></script>
<script>
  $(function(){
    //根据(config.js)配置生成相应html
    var n = 0;    
    var m = parseInt(location.href.split("m=")[1]) || 0 //方案索引
    var max = typeof init.pageObject[m] === 'number' ? init.pageObject[m] : init.pageObject[m].img || 1; //读取方案图片数    
    var indexListNode = '';//索引列表节点
    var imgListNode = '';//图片列表节点
    //设置页标题
    document.title = init.title
    //生成节点
    for(var i = 0;i < max;i++){
      indexListNode += '<div>'+(i+1)+'</div>';
      imgListNode += '<div class="img"><img src="../../img/'+m+' ('+(i+1)+').jpg"/></div>'
    }
    
    //iframe片头
    if(init.pageObject[m] && init.pageObject[m].videoTitle){
      var iframeURL = init.pageObject[m].videoTitle
      //配置参数为数组，刷新切换不同片头
      if(Array.isArray(iframeURL)){
        sessionStorage.num ? sessionStorage.num = Number(sessionStorage.num) + 1 : sessionStorage.num = 0
        iframeURL = iframeURL[sessionStorage.num % iframeURL.length]        
        console.log(iframeURL)
      }
      $("#content").append('<div class="video_block"><iframe src="'+iframeURL+'" id="iframe"></iframe></div>')
      $(".video_block").css({"display":"block"})
    }

    $(".sum").text(max);//图数
    $(".pa_ul").html(indexListNode) //图片导航索引
    $(".img_ul").html(imgListNode) //图片节点
    
    //图片切换
    function showImg(){
      $(".num").text(n+1);
      $("#content .img").eq(n).stop(true,true).fadeIn().siblings().css({"display":"none"});
    }
    showImg();
    $("#content .img").on("click",function(){
        n++;
        n %= max;
        showImg();
    })
    $(".pa_ul div").on("mouseover",function(){
      n = $(this).index();
      showImg();
    })    

    //iframe点击处理
    var IframeOnClick = {
        resolution: 200,
        iframes: [],
        interval: null,
        Iframe: function() {
            this.element = arguments[0];
            this.cb = arguments[1];
            this.hasTracked = false;
        },
        track: function(element, cb) {
            this.iframes.push(new this.Iframe(element, cb));
            if (!this.interval) {
                var _this = this;
                this.interval = setInterval(function() {
                    _this.checkClick();
                }, this.resolution);
            }
        },
        checkClick: function() {
            if (document.activeElement) {
                var activeElement = document.activeElement;
                for (var i in this.iframes) {
                    if (activeElement === this.iframes[i].element) { // user is in this Iframe  
                        if (this.iframes[i].hasTracked == false) {
                            this.iframes[i].cb.apply(window, []);
                            this.iframes[i].hasTracked = true;
                        }
                    } else {
                        this.iframes[i].hasTracked = false;
                    }
                }
            }
        }
    }
    IframeOnClick.track(document.getElementById("iframe"), function() {
        $(".video_block").stop(true,true).fadeOut();
    });
  })
</script>
</body>
</html>
